<template>
    <el-card style="width: 500px; height: 300px;">
      <template #header>
        <div class="card-header">
          <h1>平台名称: <span> {{ card_name }}</span></h1>
        </div>
      </template>
      <p>URL: <span> {{ card_url }}</span></p>
      <p>用户名: <span> {{ card_user }}</span></p>
      <p>密码: <span> {{ card_password }}</span></p>
      <p>描述: <span> {{ card_desc }}</span></p>
      <template #footer><el-button type="info" @click="openNewPage">跳转</el-button></template>
    </el-card>
  </template>

<script setup lang="ts">
import { defineProps } from 'vue';
// 使用 defineProps 定义 props
const props = defineProps<{
  card_name: string;
  card_url: string;
  card_user: string;
  card_password: string;
  card_desc: string;
}>();

// 定义打开新页面的方法
const openNewPage = () => {
  window.open(props.card_url, '_blank'); // 替换为你实际要打开的 URL
};
</script> 

<style scoped>

</style>